<%var obj={pageTitle:"新增影片"};%>
  {{include "../Header.html" obj}}
  <div class=" container">
    <div class=" page-header">
      <h2 class=" text-center text-primary">新增影片</h2>
    </div>
    <form id="addMovieInfoForm" role="form" action="" class=" form-horizontal" method="POST">
      <div class=" form-group">
        <label for="" class=" control-label col-sm-2">电影名称</label>
        <div class=" col-sm-7">
          <input type="text" class=" form-control" placeholder="请输入电影名称" name="m_name" id="m_name">
        </div>
      </div>
     <!--我希望添加一个图片上传的功能 -->
     <div class=" form-group">
       <label for="" class=" control-label col-sm-2">电影图片</label>
       <div class=" col-sm-7">
         <div class=" col-sm-2">
           <img src="../../public/images/01.jpg" id="img_show" class=" img-thumbnail img-responsive" alt="">
         </div>
         <div class=" col-sm-10">
          <input type="file" class=" form-control" id="pic" style="display:none">
          <input type="hidden" id="m_img" name="m_img" value="">
          <button type="button" class=" btn btn-info" id="btnChooseImg">
            <span class=" glyphicon glyphicon-circle-arrow-up"></span>上传图片
          </button>
         </div>
       </div>
     </div>
      <div class=" form-group">
        <label for="" class=" control-label col-sm-2">电影描述</label>
        <div class=" col-sm-7">
          <textarea class=" form-control" name="m_description" id="m_description" placeholder="请输入电影描述信息" rows="4"></textarea>
        </div>
      </div>

      <div class=" form-group">
        <label for="" class=" control-label col-sm-2">电影主演</label>
        <div class=" col-sm-7">
          <input type="text" class=" form-control" placeholder="请输入电影主演" name="m_actor" id="m_actor">
        </div>
      </div>

      <div class=" form-group">
        <label for="" class=" control-label col-sm-2">电影类型</label>
        <div class=" col-sm-7">
          <input type="text" placeholder="请输入电影类型" class=" form-control"  name="m_type" id="m_type">
        </div>
      </div>

      <div class=" form-group">
        <label for="" class=" control-label col-sm-2">上映时间</label>
        <div class=" col-sm-7">
          <input type="text" readonly onclick="WdatePicker()" class=" form-control" placeholder="请输入上映时间" name="show_time" id="show_time">
        </div>
      </div>

      <div class=" form-group">
        <label for="" class=" control-label col-sm-2">电影时长</label>
        <div class=" col-sm-7">
          <input type="number" min="30" max="180" class=" form-control" placeholder="请输入电影时长" name="play_time" id="play_time">
        </div>
      </div>

      <div class=" form-group">
        <div class=" col-sm-7 col-sm-offset-2">
          <button type="button" class=" btn btn-primary btn-load-submit" data-formid="#addMovieInfoForm">提交</button>
          <a href="/MovieInfo/query" class=" btn btn-danger">返回</a>
        </div>
      </div>
    </form>
  </div>
  <script type="text/javascript">
    $(function(){
      $("#btnChooseImg").click(function(){
        $("#pic").click();
      })
      $("#pic").change(function(){
        var file=$(this)[0].files[0];
        //通过正则来判断文件的类型
        var type=file.type;
        var str=/^(image)\/\w{3,4}$/;
        if(str.test(type)){
          //Ajax异步上传图和
          var formData=new FormData();
          formData.append("m_pic",file);
          $.ajax({
            type:"post",
            url:"/MovieInfo/uploadFile",
            data:formData,
            processData:false,    //这两个的作用就是禁止设置我的formData请求为application/x-www-form-urlencoded
            contentType:false,
            success:function(res){
              $("#img_show").attr("src",res.data);
              $("#m_img").val(res.data);
            },
            error:function(err){
              console.log(err);
            }
          })

        }
        else{
          layer.alert("请选择图片文件");
          $("#pic").val("");
        }
      })
    })
  </script>

  {{include "../Footer.html"}}